<template>
  <div class="personal-center-container">
    <el-row :gutter="24">
      <el-col>
        <el-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="16" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form ref="profile" label-width="80px" style="width:500px" :model="profile">
                  <div class="avaterBox">
                    <el-upload
                      accept="image/*"
                      :action="action"
                      :data="otherData"
                      :limit="1"
                      :multiple="false"
                      :on-success="uploadFile"
                      :show-file-list="false"
                    >
                      <el-avatar
                        class="user-avatar"
                        :size="80"
                        :src="profile.user_avatar"
                      >
                        <img
                          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                        />
                      </el-avatar>
                      <div class="avatarBtn">修改头像</div>
                    </el-upload>
                  </div>
                  <el-form-item label="会员账号">
                    <el-input v-model="profile.user_name" :disabled="true" />
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="profile.nick_name" />
                  </el-form-item>
                  <el-form-item label="真实姓名">
                    <el-input v-model="profile.true_name" />
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-select v-model="profile.user_sex" style="width: 100%">
                      <el-option label="女" :value="0" />
                      <el-option label="男" :value="1" />
                      <el-option label="保密" :value="2" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">
                      保存个人信息
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import store from '@/store'
  import { getInfo, updateInfo } from '@/api/user'
  import { baseURL } from '@/config'
  export default {
    name: 'UserCenter',
    data() {
      return {
        otherData: {},
        action: baseURL + '/?s=App.Common_File.Upload',
        activeName: 'first',
        profile: {
          user_avatar: '',
          user_name: '',
          nick_name: '',
          true_name: '',
          user_sex: 2,
        },
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        token: 'user/token',
      }),
    },
    mounted() {
      this.otherData['access_token'] = this.token
      this.getUserInfo()
    },
    methods: {
      async uploadFile(res) {
        if (res.ret == 200) {
          this.profile.user_avatar = res.data.url
          var form = this.profile
          const { data } = await updateInfo(form)
          if (data.is_success) {
            store.dispatch('user/getUserInfo')
            this.$baseMessage(
              '修改头像成功',
              'success',
              'vab-hey-message-success'
            )
          }
        }
      },
      async getUserInfo() {
        var form = {}
        const { data } = await getInfo(form)
        this.profile = data.profile
      },
      async onSubmit() {
        var form = this.profile
        const { data } = await updateInfo(form)
        if (data.is_success) {
          store.dispatch('user/getUserInfo')
          this.$baseMessage('修改成功', 'success', 'vab-hey-message-success')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .personal-center-container {
    padding: 0 !important;
    background: $base-color-background !important;
    .avaterBox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0 40px 0;
      .avatarBtn {
        margin-top: 10px;
        color: #6898fc;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
</style>
